<template>
    <div>
        <h3>发表评论</h3>
        <hr>
        <textarea placeholder="请输入要评论的内容,字数不得多于120字" maxlength="120" v-model="msg"></textarea>
        <mt-button type="primary" size="large" @click="postComments()">发表评论</mt-button>
        <div class="cmt-list" v-for="(item,i) in comments" :key="item.add_time">
            <div class="cmt-item">
                <div class="cmt-title">
                第{{i+1}}楼&nbsp;&nbsp;用户:{{item.user_name}} 发表时间:{{item.add_time|dateFormat}}
            </div>
              <div class="cmt-body">
               {{item.content=='undefined' ? '此用户很懒,什么也没留下':item.content}}
            </div>
            </div>
        </div>

        <mt-button type="danger" size="large"  plain @click="getmore">加载更多</mt-button>
    </div>

</template>
<script>
import {Toast} from 'mint-ui'
export default {
    data(){
        return{
            pageindex:1, //默认展示第一页数据
            comments:[],
            msg:""
        }
    },
 
    created(){
        this.getcomments();
    },
    methods:{
      
        getcomments(){
           this.$http.get("api/getcomments/"+this.id+"?pageindex="+this.pageindex).then(result=>{
               if(result.body.status==0){
                   //点击加载更多的时候,每当获取到新数据,应该让老数据调用数组的concat方法拼接上新数组
                   this.comments=this.comments.concat(result.body.message);
               }
               else{
                   Toast('评论加载失败')
               }
           }) 
        } ,
      getmore(){
           this.pageindex++;
         this.getcomments();
        },
        postComments(){
            if(this.msg.trim().length==0){
               return Toast("评论内容不能为空")
            }
            // 发表评论
            // 参数1:请求的url地址
            // 参数2:提交给服务器的数据对象(comment:this.msg)
            // 参数3:定义提交时候,表单中数据的格式(emulateJSON:true)
            this.$http.post('api/postcomment/'+this.id,{
                content:this.msg.trim()
            }).then(result=>{
                if(result.body.status==0){
                    var cmt={
                        user_name:"匿名用户",
                        add_time:Date.now(),
                        content:this.msg.trim()
                    };
                    // unshift方法手动把最新评论的内容拼接到原有的评论上
                    this.comments.unshift(cmt);
                    this.msg="";
                }else{
                    Toast("评论失败")
                }
            })
        }
    },
       props:['id'] 
}
</script>
<style scoped>
h3{
    font-size: 16px;
}
textarea{
    font-size: 14px;
    height: 85px;
    margin: 0;
}
.cmt-title{
    background-color:rgb(184, 187, 184);
      line-height: 35px;
}
.cmt-item{
    font-size: 13px;
}
.cmt-body{
    line-height: 35px;
    text-indent: 2em;
}
.cmt-list{
    margin-top: 5px;
}
hr{
    color: rgb(192, 193, 194)
}
</style>

